<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 购物商城 </title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <style>
        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            filter: brightness(1.2);
        }

        .body {
            position: relative;
            overflow: auto;
            width: 1280px;
            top: 100px;
            left: calc(50% - 640px);
            border: 2px solid;
            border-color: #aab0ac;
            background-color: #f7f7f7;
        }

        .tab {
            margin: 20px 0 0 80px;
            border-right: 0px;
            border-bottom: 1px solid;
            border-left: 0px;
            border-top: 0px;
            border-color: #aab0ac;

        }

        .tab th {
            border-right: 0px;
            border-bottom: 1px solid;
            border-left: 0px;
            border-top: 0px;
            border-color: #aab0ac;
            width: 160px;
            height: 65px;
        }

        .tab tr {
            width: 160px;
            height: 65px;
            text-align: center;
            background-color: #f7f7f7;
        }

        .tab td {
            border-right: 0px;
            border-bottom: 1px solid;
            border-left: 0px;
            border-top: 1px solid;
            border-color: #aab0ac;

        }


        .window_css {
            z-index: 10;
            -moz-opacity: 0.18;
            opacity: .75;
            filter: alpha(opacity=18);
        }

        .hoverWindow_css {
            display: none;
            position: absolute;
            top: 15%;
            left: 25%;
            width: 50%;
            height: 60%;
            border: 0px solid;
            border-radius: 30px;
            background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 100%);
            box-shadow: 0px 20px 30px #989595;
            z-index: 11;
            transition: 1.25s;

        }

        .hoverWindow_css:hover {
            transition: 1.5s;
            transform: scale(1.06);
        }

        .hoverWindow_css #cancel_img {
            position: absolute;
            top: 20px;
            left: 655px;
            width: 35px;
            height: 35px;
            cursor: pointer;
        }

        .hoverWindow_css #cancel_img:hover {
            filter: brightness(1.5);
        }


        .box {
            margin: 20px auto;
            /*background-color: pink;*/
            width: 92%;
            height: 50%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            align-content: space-between;
        }

        .box img {
            width: 100%;
            height: 100%;
        }

        .one {
            /*flex: 1;*/
            width: 30%;
            height: 80%;
            border: 1.5px solid #aab0ac;
            /*background-color: skyblue;*/
        }

        .two {
            /*flex: 1;*/
            width: 30%;
            height: 80%;
            border: 1.5px solid #aab0ac;
            /*background-color: skyblue;*/
        }

        .three {
            /*flex:1;*/
            width: 30%;
            height: 80%;
            border: 1.5px solid #aab0ac;
        }

        .paySuccess{
            width: 400px;
            height: 140px;
            position: absolute;
            left: calc(50% - 150px);
            top:calc(50% - 140px);
            background-color: #f1f1f1;
            z-index: 10;
            display: none;
            cursor: pointer;
        }
        .payImg{
            width: 200px;
            height: 50px;
            margin: 10px auto;
            /*background-color: skyblue;*/
            font-size: 20px;
            line-height: 50px;
            text-align: center;
        }
        .payImg img{
            /*display: inline-block;*/
            width: 30px;
            height: 30px;
            vertical-align: middle;
        }
        .payImg p{
            display: inline-block;
            margin-left: 8px;
        }
        .paybtn{
            background-color: rgba(23, 204, 122);
            width: 60px;
            height: 30px;
            color: white;
            font-size: 16px;
            border: 1px solid white;
            margin-left: calc(50% - 30px);
            margin-top: 12px;
            cursor: pointer;
        }
        .paybtn:hover{
            filter: brightness(1.1);
        }
        #admin {
            position: fixed;
            left: calc(50% - 90px);
            z-index: 10;
        }

    </style>

</head>


<body>
<script>
    alert("祝您购物愉快！");
</script>

<!--支付成功是填出的盒子-->
<div class="paySuccess">
    <div class="payImg"><img src="./images/支付成功.png" alt=""><p>支付成功！</p></div>
    <button class="paybtn">确定</button>
</div>

<div style="text-align: center; " id="window">
    <h1 id="admin" ></h1>
    <div class="body">
        <table border="1" cellspacing="0" class="tab" id="bookTable">
            <tbody>
            <tr>
                <th>书本编号</th>
                <th>书名</th>
                <th>作者</th>
                <th>价格</th>
                <th>库存</th>
                <th>出版社</th>
                <th colspan="2">操作</th>
            </tr>

            <!--      <tr>-->
            <!--        <td></td>-->
            <!--        <td></td>-->
            <!--        <td></td>-->
            <!--        <td></td>-->
            <!--        <td></td>-->
            <!--        <td></td>-->
            <!--        <td><a href="#" style="text-decoration: none; color: #01b6eb" class="toPay">  </a></td>-->
            <!--      </tr>-->
            </tbody>
        </table>
    </div>
    <div id="hoverWindow" class="hoverWindow_css">
        <img src="images/backToCart.png" alt="" id="cancel_img" title=" 返回商城 ">

        <h1 style="text-align: center;margin-top: 70px; color: #54bd77; ">请扫码支付</h1>
        <div class="box">
            <div class="one"><img src="./images/xg.jpg" alt=""></div>
            <div class="two"><img src="./images/ftw.jpg" alt=""></div>
            <div class="three"><img src="./images/zxb.jpg" alt=""></div>
        </div>
    </div>
</div>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //支付成功，点击确定事件，实现页面刷新
    let paybtn = document.querySelector('.paybtn');
    let paySuccess = document.querySelector('.paySuccess');
    paybtn.addEventListener('click',function (){
        paySuccess.style.display = 'none';
        window.location.href = '/Shop.html'
    })

    //设置某某好
    var admin = document.getElementById("admin");
    admin.innerText = "欢迎" + JSON.parse(sessionStorage.getItem("user")).userName + "光临";
    axios({
        url: "/getAllBooks",
        method: 'get'
    }).then(resp => {
        var bookList = resp.data;
        var tableData = "<tr >\n" +
            "        <th>书本编号</th>\n" +
            "        <th>书名</th>\n" +
            "        <th>作者</th>\n" +
            "        <th>价格</th>\n" +
            "        <th>库存</th>\n" +
            "        <th>出版社</th>\n" +
            "        <th colspan=\"2\">操作</th>\n" +
            "      </tr>\n";
        for (var i = 0; i < bookList.length; i++) {
            tableData += "<tr>\n" +
                "        <td>" + bookList[i].bookId + "</td>\n" +
                "        <td>" + bookList[i].bookName + "</td>\n" +
                "        <td>" + bookList[i].author + "</td>\n" +
                "        <td>" + bookList[i].price + "</td>\n" +
                "        <td>" + bookList[i].stock + "</td>\n" +
                "        <td>" + bookList[i].publisher + "</td>\n" +
                "        <td><a href=\"#\" style=\"text-decoration: none; color: #01b6eb\" class=\"toPay\"> 立即购买 </a></td>\n" +
                "      </tr>"
        }

        document.getElementById("bookTable").innerHTML = tableData;

        var toPay = document.getElementsByClassName("toPay");
        for (var i = 0; i < toPay.length; i++) {
            toPay[i].addEventListener('click', function () {
                /*悬浮窗口的显示,需要将display变成block*/
                document.getElementById("hoverWindow").style.display = "block";
                /*将背景变暗*/
                document.getElementById("window").setAttribute("class", "window_css");
                setTimeout(function () {
                    //3秒过后显示支付成功窗口
                    paySuccess.style.display = 'block';
                    /*关闭悬浮窗口,需要将display变成none*/
                    document.getElementById("hoverWindow").style.display = "none";
                    //不得不用该方法，不然没法刷新
                    // location.href = "/Shop.html";
                }, 3000)
            });
        }
    })


    var cancel_img = document.getElementById("cancel_img");
    cancel_img.addEventListener('click', function () {
        /*关闭悬浮窗口,需要将display变成none*/
        document.getElementById("hoverWindow").style.display = "none";
        /*将背景恢复*/
        document.getElementById("window").removeAttribute("class", "window_css");
    });

</script>
</body>
</html>